import React, {useEffect, useLayoutEffect, useState} from "react"

function Example() {
  const [count, setCount] = useState(0)

  useLayoutEffect(() => {
    console.log('useLayoutEffect mount')
    return () => {
      console.log('useLayoutEffect unmount')
    }
  }, [count])

  useEffect(() => {
    console.log('useEffect mount')
    return () => {
      console.log('useEffect unmount')
    }
  }, [count])

  useEffect(() => {
    // 你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
    document.title = `You clicked ${count} times`
   
  });

  useEffect(() => {
    // 使用多个 Effect 实现关注点分离，Hook 允许我们按照代码的用途分离他们
    function handleStatusChange(status) {
      // setIsOnline(status.isOnline)
    }

    // ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)
    return function cleanup() {
      // 组件卸载时执行，清除effect副作用
      // ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)
    }
  }, [ 
    //props.friend.id
  ])

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

export default Example